<!DOCTYPE html>

<meta charset="utf-8">
<meta name="description" content="{{ config('meta_description') }}">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="{{ asset('images/favicon.light.png') }}">
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="{{ asset('app.css') }}">

{% if config('google_analytics_id', false) %}
    {% include 'components/analytics/google.twig' %}
{% endif %}

{% if config('matomo_analytics_url', false) and config('matomo_analytics_site_id', false) %}
    {% include 'components/analytics/matomo.twig' %}
{% endif %}

<title>{{ title }} &bull; {{ config('site_title') }}</title>

<div id="app" v-bind:class="{ dark: darkMode }">
    <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
        {% block content %}{% endblock %}
    </div>

    <div class="fixed inset-0 flex items-center justify-center bg-gray-600 p-4 z-50" v-show="loading">
        <i class="fas fa-spinner fa-pulse fa-5x text-white"></i>
    </div>
</div>

<script src="{{ asset('app.js') }}"></script>
